import Taro, { Component, useState } from '@tarojs/taro'
import PropTypes from 'prop-types'
import { View, Image, Text } from '@tarojs/components'
import ArrowDown from '../../assets/arrow_down.png'
import ArrowUp from '../../assets/arrow_up.png'
import './index.scss'

function MineOrderFilter (props) {
	const { onShowStatusTypeSelector } = props

	const [visibled, setVisibled] = useState(false)
	const [selected, setSelected] = useState('')

	const statusActive = selected === 'status' && visibled
	const typeActive = selected === 'type' && visibled

	const onClickStatus = () => {
		setVisibled(!visibled)
		setSelected('status')
		onShowStatusTypeSelector && onShowStatusTypeSelector({
			visibled: !visibled,
			selected: 'status'
		})
	}

	const onClickType = () => {
		setVisibled(!visibled)
		setSelected('type')
		onShowStatusTypeSelector && onShowStatusTypeSelector({
			visibled: !visibled,
			selected: 'type'
		})
	}


	return (
		<View	className="mine-order-filter">
			<View className="type-box status" onClick={() => onClickStatus()}>
				<Text className="filter-text" style={{ color: statusActive ? '#FF5D24' : '' }}>状态</Text>
				<Image className="arrow-down" src={statusActive ? ArrowUp : ArrowDown}></Image>
			</View>
			<View className="line"></View>
			<View className="type-box type" onClick={() => onClickType()}>
				<Text className="filter-text" style={{ color: typeActive ? '#FF5D24' : '' }}>类型</Text>
				<Image className="arrow-down" src={typeActive ? ArrowUp : ArrowDown}></Image>
			</View>
		</View>
	)
}

MineOrderFilter.propTypes = {
	onShowStatusTypeSelector: PropTypes.func
}

export default MineOrderFilter